<template>
  <h2>Parent 组件 --- {{ flag }}</h2>
  <button @click="flag = !flag">Toggle</button>
  <hr />
  <Son v-if="flag" />
</template>

<script setup>
import { ref } from 'vue'
import Son from './Son.vue'
import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue'

const flag = ref(true)

onBeforeMount(() => {
  console.log('Parent: onBeforeMount')
})

onMounted(() => {
  console.log('Parent: onMounted')
})

onBeforeUnmount(() => {
  console.log('Parent: onBeforeUnmount')
})

onUnmounted(() => {
  console.log('Parent: onUnmounted')
})
</script>
